<template>
  <div class="item-list">
    <div class="item-list-header">
      <div class="title">音频列表</div>
      <div class="status" v-if="videoData.contentItems && videoData.contentItems.length > 0">
        {{ assignedCount }}/{{ totalCount }} 已分配
      </div>
    </div>

    <div class="item-list-content noscrollbar">
      <div v-if="!videoData.contentItems || videoData.contentItems.length === 0" class="empty-state">
        <div class="empty-text">暂无音频，请先在语音合成界面生成音频</div>
      </div>

      <div v-else class="item-list-items">
        <div
          v-for="item in videoData.contentItems"
          :key="item.id"
          class="item-card"
          :class="{
            'selected': selectedItemId === item.id,
            'assigned': isItemAssigned(item.id)
          }"
          @click="action.selectItem(item.id)"
        >
          <div class="item-audio">
            <t-button class="play-btn" size="small" circle variant="outline" @click.stop="action.previewAudio(item)">
              <template #icon>
                <PlayCircleIcon />
              </template>
            </t-button>
          </div>
          <div class="item-content">
            <div class="item-name" :title="item.name || '未命名'">{{ item.name || '未命名' }}</div>
<!--            <div class="item-duration">{{ item.duration || '未知时长' }}</div>-->
          </div>
          <div class="item-status">
            <t-tag v-if="isItemAssigned(item.id)" theme="success">已分配</t-tag>
            <t-tag v-else theme="warning">未分配</t-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { PlayCircleIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';

const props = defineProps({
  listener: {
    type: Object,
    default: () => ({})
  },
  modelValue: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['previewAudio', 'update:modelValue']);

// 双向绑定视频数据
const videoData = defineModel({});

// 调试日志 - 检查数据变化
watch(() => videoData.value.contentItems, (newVal) => {
}, { deep: true });
// 当前选中的项目ID
const selectedItemId = ref(null);

// 已分配的音频项数量
const assignedCount = computed(() => {
  if (!videoData.value || !videoData.value.assignments) return 0;
  return videoData.value.assignments.filter(a => a.modelId && a.contentId).length;
});

// 音频项总数
const totalCount = computed(() => {
  if (!videoData.value || !videoData.value.contentItems) return 0;
  return videoData.value.contentItems.length;
});

// 检查项目是否已分配
const isItemAssigned = (itemId) => {
  if (!videoData.value || !videoData.value.assignments) return false;
  return videoData.value.assignments.some(a => a.contentId === itemId && a.modelId);
};

const action = {
  // 选择项目
  selectItem(id) {
    selectedItemId.value = id;
  },

  // 预览音频
  previewAudio(item) {
    if (item && item.audioUrl) {
      if (props.listener) {
        props.listener.listen({
          name: item.name || '未命名',
          audioUrl: item.audioUrl
        });
      } else {
        emit('previewAudio', {
          action: 'play',
          item
        });
      }
    } else {
      MessagePlugin.warning('音频文件不可用');
    }
  }
};
</script>

<style lang="less" scoped>
.item-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  &-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;  // 深色边框改为浅灰色

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #333333;  // 白色文字改为深灰色
    }

    .status {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);  // 半透明白色改为半透明黑色
    }
  }

  &-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background-color: #fafafa;  // 添加浅灰背景色，增强层次感
  }

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;

    .empty-text {
      color: rgba(0, 0, 0, 0.6);  // 半透明白色改为半透明黑色
      font-size: 14px;
    }
  }

  .item-list-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;  // 深色背景改为白色
    border-radius: 4px;
    border: 1px solid #e0e0e0;  // 深色边框改为浅灰色
    transition: border-color 0.3s;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感

    &:hover {
      background-color: #f9f9f9;  // 添加悬停效果
    }

    &.selected {
      border-color: var(--td-brand-color);
      background-color: rgba(0, 82, 217, 0.05);  // 选中状态添加淡蓝色背景
    }

    &.assigned {
      border-left: 4px solid #4CAF50;  // 保留分配状态的绿色边框
    }

    &:last-of-type {
      margin-bottom: 21px;
    }

    .item-audio {
      .play-btn {
        --td-brand-color: #309CFF;
        color: #309CFF;  // 保留按钮的蓝色
      }
    }

    .item-content {
      flex: 1;
      min-width: 0;

      .item-name {
        font-weight: 500;
        font-size: 14px;
        color: #333333;  // 白色文字改为深灰色
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
      }

      .item-duration {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.6);  // 半透明白色改为半透明黑色
      }
    }

    .item-status {
      :deep(.t-tag) {
        white-space: nowrap;
      }
    }
  }
}

// 滚动条样式
.noscrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;  // 深色滚动条改为浅灰色

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;  // 深色滚动条改为浅灰色
    border-radius: 3px;
  }
}
</style>
